
@media screen and (min-width: 900px) {
    .head{
        --headHeight:calc(calc(100vh )*0.1);
        --headWidth:calc(100vw );
        height: var(--headHeight);
        width: var(--headWidth);
        --color: #666dff;
    }
    .useInfo{
        width:30%;
        height: 100px;
        float: left;
    }
    .useInfo p{
        font-size: 20px;
    }
    .useInfo img{
        height: 100%;
        float: left;
        margin-left: 20%;
    }
    .welCome{
        width:30%;
        height: 100px;
        float: left;
        font-size: 50px;
        color: var(--color);
    }
    .towPic{
        width:30%;
        height: 100px;
        float: left;
    }
    .towPic img{
        height:100%;
        margin: 0 auto;
    }
}

@media screen and (max-width: 900px) {
    .head{
        --headHeight:calc(var(--screenHeight)*0.1);
        --headWidth:var(--screenWidth);
        height: var(--headHeight);
        width: var(--headWidth);
        --color: #666dff;
        margin-top: 10px;
    }
    .useInfo{
        width:60%;
        height: calc(var(--headHeight)*0.8);
        float: left;
    }
    .useInfo p{
        float: left;
        margin: 0px;
    }
    .useInfo img {
        height: 70%;
        float: left;
        margin: 0 6%;
    }
    .welCome{
        display: none;
    }
    .towPic{
        width:40%;
        height: 100%;
        float: left;
    }
    .towPic img{
        height:70%;
        margin: 0 auto;
    }
}
